<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2023-12-05 17:46:12
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-11 01:34:29
 * @FilePath: \mdbj-ui\src\views\mypage\roadinspection\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by zhangduo, All Rights Reserved. 
-->
<template>
  <div class="container">
    <Split v-model="split1">
      <div slot="left" class="leftPanel">
        <map-container class="mapcontainer" @viewHandle="viewHandle">
        </map-container>
      </div>
      <div slot="right" class="rightPanel">
        <keep-alive>
          <component
            :is="componentId"
            :mapview="mapview"
            :paramObj="paramObj"
            v-if="isMapLoaded"
          ></component
        ></keep-alive>
      </div>
    </Split>
  </div>
</template>

<script>
import { Split } from "../../../components/Split";
import mapContainer from "../../../components/Map/mapContainer";
import dataPanel from "./dataPanel";
import inceptionDetailPanel from "./inceptionmanager/detailPanel";
import inceptionEditPanel from "./inceptionmanager/editPanel";
import inceptionAddPanel from "./inceptionmanager/addPanel";
import inceptionDataPanel from "./inceptionmanager/dataPanel";
export default {
  components: {
    Split,
    mapContainer,
    dataPanel,
    inceptionDetailPanel,
    inceptionEditPanel,
    inceptionAddPanel,
    inceptionDataPanel,
  },
  provide() {
    return {
      toggleComponent: this.toggleComponent,
    };
  },
  data() {
    return {
      split1: 0.5,
      mapview: undefined,
      componentId: "dataPanel",
      isMapLoaded: false,
      paramObj: {},
    };
  },
  methods: {
    /**
     * @description: 切换组件方法
     * @param {*} componentId  组件名称
     * @param {*} paramObj 组件参数对象
     * @return {*}
     */
    toggleComponent(componentId, paramObj) {
      // this.isMapLoaded = true;

      this.isMapLoaded = false;
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.isMapLoaded = true;
        this.paramObj =
          paramObj == null || paramObj == undefined ? {} : paramObj;
        this.componentId = componentId;
      });
    },
    viewHandle(value) {
      console.log("mapview loaded");
      this.mapview = value;
      this.toggleComponent(this.componentId);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 60px);
}
.leftPanel {
  height: calc(100vh - 60px);
}
.rightPanel {
  height: calc(100vh - 60px);
  padding: 10px;
}
.mapcontainer {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}
</style>
